<template>
  <main-card-admin :title="`账号详情（${clientInfo.username || ''}）`" :screen-style-obj="{ padding: '0 0 24px' }" :crumbs="crumbs">
    <template #screen-space>
      <a-row class="time-module">
        <a-col class="mr-16 label">创建时间</a-col>
        <a-col class="mr-24 val">{{ clientInfo.createTime }}</a-col>
        <a-col class="mr-24">
          <svg xmlns="http://www.w3.org/2000/svg" width="2" height="20" viewBox="0 0 2 20" fill="none">
            <path d="M1 0V20" stroke="#D9D9DB" />
          </svg>
        </a-col>
        <a-col class="mr-16 label">更新时间</a-col>
        <a-col class="mr-24 val">{{ clientInfo.updateTime }}</a-col>
      </a-row>
    </template>
    <div class="page-body">
      <info-module :info-arr="clientInfoArr" />
      <right-tab :client-id="clientInfo.id || ''" />
    </div>
  </main-card-admin>
</template>

<script lang="ts" setup>
  import { computed, provide, ref } from 'vue'
  import { useRoute } from 'vue-router'

  import { Crumb } from '@/components/MainCard/index.vue'
  import { clientApi } from '@/services/api'

  import { ClientInfo } from '../types'
  import InfoModule from './components/Info.vue'
  import RightTab from './components/RightTab/index.vue'

  const route = useRoute()

  const clientId = (route.params.id as string) || ''
  const clientInfo = ref<ClientInfo>({})
  const isAdmin = computed(() => clientInfo.value.roleType === 2)
  provide('clientId', clientId)
  provide('isAdmin', isAdmin)

  const crumbs = computed<Crumb[]>(() => [
    isAdmin.value
      ? {
          name: '管理员',
          path: '/user-manage/admin-list'
        }
      : {
          name: '普通用户',
          path: '/user-manage/student-list'
        },
    {
      name: `账号详情（${clientInfo.value.username || ''}）`
    }
  ])
  const clientInfoArr = computed(() => [
    { label: '用户名称', val: clientInfo.value.username || '' },
    { label: '手机号', val: clientInfo.value.tel || '' },
    { label: '邮箱', val: clientInfo.value.email || '' },
    { label: '状态', val: clientInfo.value.status || '' }
  ])

  const getClientInfo = async (id: string) => {
    const { data } = await clientApi.detail(id)()
    clientInfo.value = data
  }

  getClientInfo(clientId)
</script>

<style lang="less" scoped>
  @import '@/styles/mixins.less';

  .time-module {
    display: flex;
    align-items: center;
    padding: 8px 24px;
    font-size: 12px;
    background: @background3;
    border-radius: 6px;

    .label {
      color: @text03;
    }

    .val {
      color: @text01;
    }
  }

  .page-body {
    display: flex;
    max-height: 100%;
  }
</style>
